﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>角色管理</title>
		<link rel="stylesheet"
			href="../../css/table.css" type="text/css"/>
		<script type="text/javascript">
			function doDelete(id) {
				if (confirm("确定删除此角色吗？")) {
					location.href = "success.html?sysRole.roleId=" + id;
				}
			}
		</script>
		<!--以下3个js库必须按照顺序引入-->
		<!--vue脚本库-->
		<script type="text/javascript"
				src="/static/js/vue-3.2.4.global.js">
			<!--axios脚本库-->
		</script>
		<script type="text/javascript"
				src="/static/js/axios-0.18.0.min.js">
		</script>
		<!--我们自己封装的axios函数库 -->
		<script type="text/javascript"
				src="/static/js/axios-helper.js">
		</script>
	</head>
	<body id="app">
		<table width="100%">
			<tr>
				<td>
					<font color="black">您正在做的业务是：人力资源--权限管理--角色管理 </font>
				</td>
			</tr>
			<tr>
				<td>
					当前角色总数：{{sum}}例
				</td>
			</tr>
			<tr>
				<td align="right">
					<input type="button" value="添加角色" class="BUTTON_STYLE1" onclick="location.href='right_add.html'">
				</td>
			</tr>
		</table>
		<table width="100%" border="1" cellpadding=5 cellspacing=1
				bordercolorlight=#848284 bordercolordark=#eeeeee
				class="TABLE_STYLE1">
			<tr class="TR_STYLE1">
				<td class="TD_STYLE1">
					角色编号
				</td>
				<td class="TD_STYLE1">
					角色名称
				</td>
				<td class="TD_STYLE1">
					角色说明
				</td>
				<td class="TD_STYLE1">
					是否可用
				</td>
				<td class="TD_STYLE1">
					操作
				</td>
			</tr>

				<tr class="TR_STYLE2" v-for="role in roleList">
					<td class="TD_STYLE2">
						{{role.rid}}
					</td>
					<td class="TD_STYLE2">
						{{role.rname}}
					</td>
					<td class="TD_STYLE2">
						{{role.rdesc}}
					</td>
					<td class="TD_STYLE2">
						{{role.isDisable==1?'是':'否'}}
					</td>
					<td class="TD_STYLE2">

						<img src="/static/images/bt_edit.gif" title="编辑" style="cursor:pointer;" @click="edit(role.rid)" />
						<img src="/static/images/bt_del.gif" title="删除" style="cursor:pointer;" @click="del(role.rid)"/>
					</td>
				</tr>
		</table>
		<p style="text-align:center;">
				<a href="javascript:void(0)" style="color:black;" @click="goto(1)">首页</a>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;" @click="previous()">上一页</a>
				&nbsp;
				<font v-for="i in maxPage">
					<a href="javascript:void(0)" @click="goto(i)">
						{{i}}&nbsp;
					</a>
				</font>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;" @click="next()">下一页</a>
				&nbsp;
	     		<a href="javascript:void(0)" style="color:black;" @click="goto(maxPage)">尾页</a>
		</p>
	</body>
	<script type="module">
		Vue.createApp({
			data(){
				return{
					//角色列表
					roleList:[],
					//角色列表总记录数
					sum:null,
					//默认分页查询的值
					page:{
						current:1,
						size:4
					},
					maxPage:null
				}
			},
			created(){
				this.loadRoleList();
			},
			methods:{
				//查询角色列表
				loadRoleList(){
					requestGet("/role/queryAll",this.page).then((data)=>{
						console.info("***data：",data);
						this.roleList=data.records;
						this.sum=data.total;
						//拿最大页码数 实现尾页查询
						this.maxPage=Math.ceil(data.total/data.size);
					})
				},
				//首页和尾页查询
				goto(num){
					//num接收首页的值 一般永远是第一页 把page对象中的current设置为num
					this.page.current=num;
					//再次调用
					this.loadRoleList();
				},
				//下一页
				next(){
					let c=this.page.current;
					c= (c+1) > this.maxPage ? this.maxPage:(c+1);
					this.page.current=c;
					this.loadRoleList();
				},
				//上一页
				previous(){
					let c=this.page.current;
					c=(c-1) < 1 ? 1:(c-1);
					this.page.current=c;
					this.loadRoleList();
				},
				//删除
				del(rid){
					requestGet("/role/del",{
						rid:rid
					}).then((data)=>{
						if(data.statusCode==1){
							// alert("删除成功");
							// this.loadRoleList();
							window.location.href = "/templates/page/power/successe.html";
						}else{
							alert("删除失败");
						}
					})
				},
				//单值查询
				edit(rid){
					sessionStorage.setItem("rid",rid);
					window.location.href="/templates/page/power/right_list_information.html";
				}
			}
		}).mount("#app");
	</script>
</html>
